///*------------------------------------*\
//    #OBJECTS-RADIO-BUTTON
//\*------------------------------------*/

// Radio group
.radio-group {
    .radio-button {
        margin-bottom: $base-spacing-unit;

        &:last-child {
            margin-bottom: 0;
        }
    }
}





// Radio button base styles
.radio-button {
    min-width: $size-xs;
    min-height: $size-xs;
}

@each $key, $color in $colors {
    .radio-button--#{$key} .radio-button__label:after {
        color: $color;
    }
}

    // Radio button input
    .radio-button__input {
        @extend %visuallyhidden;

        &:not(:checked) {
            & + .radio-button__label {
                &:before {
                    opacity: 1;
                }

                &:after {
                    opacity: 0;
                }
            }
        }

        &:checked {
            & + .radio-button__label {
                &:before {
                    opacity: 0;
                }

                &:after {
                    opacity: 1;
                }
            }
        }

        &[disabled] {
            & + .radio-button__label {
                cursor: not-allowed;

                &,
                &:before,
                &:after {
                    color: $black-3;
                }
            }

            & ~ .radio-button__help {
                color: $black-3;
            }
        }
    }

    // Radio button label
    .radio-button__label {
        display: block;
        position: relative;
        padding-left: $base-spacing-unit * 4;
        font-weight: 400;
        line-height: $size-xs;
        cursor: pointer;
        @include user-select(none);

        .radio-button--standalone & {
            padding-left: 0;
        }

        &:before,
        &:after {
            @include mdi;
            @include position(absolute, 0 null null 0);
            @include font-size($size-xs);
            line-height: $size-xs;
            @include transition-property(opacity);
            @include transition-duration(0.2s);
        }

        &:before {
            @include mdi-icon('radiobox-blank');
            color: $black-2;
        }

        &:after {
            @include mdi-icon('radiobox-marked');
            color: $accent;
        }
    }

    // Radio button help
    .radio-button__help {
        display: block;
        padding-left: $base-spacing-unit * 4;
        @include typography('body-1');
        color: $black-2;
        text-align: left;
    }
